<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8"/>
	<title>微美风铃</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!--[if lt IE 9]>
		<script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
		<script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
	<![endif]-->
	<link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/Style/My/Default/css/wmfl.css"/>
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/Style/Common/zTreeStyle/zTreeStyle.css">
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
	<script src="__PUBLIC__/Style/My/Default/js/wmfl.js"></script>
	<script src="__PUBLIC__/Style/Common/js/Validform.min.js"></script>
	<script src="__PUBLIC__/Style/Common/js/storage.js"></script>
</head>

<body>
	<div class="container">
		
		<div class="position">
			
			<ol class="breadcrumb">
				<li>当前位置：</li>
				<volist name="positionPath" id="vo">
					<li><a href="{$vo.url}">{$vo.name}</a></li>
				</volist>
			</ol>
		</div>

		<div class="category-list">
			<div class="panel panel-default">
				<div class="panel-heading">
		    		<h3 class="panel-title">栏目列表</h3>
			  	</div>
			  	<div class="panel-body">
					<div id="category-list-tree" class="ztree"></div>
				</div>
			</div>
		</div>
		
		<div class="category-content">
			<div class="panel panel-default">
				<div class="panel-heading">
		    		<h3 class="panel-title">{$actionTitle}</h3>
			  	</div>
			  	<div class="panel-body">
					<iframe src="__MODULE__/Content/list" id="list-iframe"></iframe>
				</div>
			</div>
		</div>
	</div>
	<style type="text/css">
		.category-list{ position:absolute; width:170px;}
		.category-content{ position:absolute; left:190px; right:15px; top:46px; bottom:20px;}
		.category-content .panel-default{height:95%;}
		.category-content .panel-body{height:95%;}
		#list-iframe{ border:none; width:100%; height:100%;}
	</style>
	
	<script type="text/javascript" src="__PUBLIC__/Style/Common/zTreeStyle/jquery.ztree.all-3.5.min.js"></script>
	<script type="text/javascript">
		var category = {$categoryJSON};
		var t = $("#category-list-tree");
		var setting = {
			data: {
				simpleData: {
					enable:true,
					idKey: "id",
					pIdKey: "pid",
					rootPId: ""
				}
			},
			callback:  {
				onClick: showList
			}
		}
		function showList(event, treeId, treeNode){
			if(!treeNode.isParent){
				$("#list-iframe").attr("src", "__MODULE__/Content/list/cat_id/"+ treeNode.id);	
			}
		}
		var treeObj = $.fn.zTree.init( t, setting, category);
		treeObj.expandAll(true);
	</script>
</body>
</html>